<!--
 * @description 卡片轮播 1：1图文组件1
 * @author gaohailan
 * @date 2022/11/28
 -->
<template>
  <div id="cardSwiperTextImgOne" class="card-swiper-text-img-one-page" :style="{'padding-left': spacing,'margin-top': top, }">
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <div class="swiper" :class="[isInitData && 'preview']" >
      <div class="swiper-wrapper" >
        <div v-for="item in list" :style="{ borderRadius:radiusSize,}" :id="item.id" :key="item.id" class="swiper-slide">
          <div class="item-left">
            <div class="item-title etc">
              {{ isInitData ? getMapping(item, 'title') : item.title }}
            </div>
            <div class="item-desc etc">
              {{ isInitData ? getMapping(item, 'title') : item.title }}
            </div>
            <div class="item-see-detail">
              <span>查看详情</span>
            </div>
          </div>
          <div class="item-img" >
            <van-image :fit="imgType" :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/error-icon.png" alt>
              </template>
            </van-image>
<!--            <img :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :style="{'object-fit': imgType}" alt="">-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '../mixins'
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import { v4 as uuidv4 } from 'uuid'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
export default {
  name: 'CardSwiperTextImgOne',
  components: {
    CellTitle
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题看了sad九分裤拉时代峻峰了咖色的'
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题'
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题'
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题'
        }
      ],
      pageSize: ''
    }
  },
  computed: {
    // 是否自动播放
    autoplay() {
      return this.option.autoplay
    },
    // 自动轮播时长
    delay() {
      return this.option.delay > 0 ? this.option.delay * 1000 : 5000
    },
    // 是否循环
    // loop() {
    //   return this.option.loop
    // },
    // 图片高度
    imgHeight() {
      return this.px2rem(this.option.imgHeight || 340)
    },
    // 是否展示副标题
    showSubTilte() {
      return this.option.showSubTilte
    }
  },
  mounted() {
    this.pageSize = this.option.number
    if (this.isInitData) {
      this.initData()
    } else {
      this.initSwiper()
    }
  },
  methods: {
    setData(result) {
      this.list = result.cardSwiperOne?.data?.rows || []
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    initSwiper() {
      const ths = this
      this.swiper = new Swiper(this.isInitData ? '#cardSwiperTextImgOne .swiper.preview' : '#cardSwiperTextImgOne .swiper', {
        slidesPerView: 1.68,
        spaceBetween: 10,
        autoplay: ths.isInitData ? ths.autoplay : false,
        delay: ths.delay,
        // loop: 'auto',
        observer: true,
        observeParents: true,
        on: {
          click: function(e) {
            // 后台管理不能跳转
            return
            const id = e.clickedSlide.getAttribute('id')
            if (!id) { return }
            const info = ths.list.find(item => { return item.id === id })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';
.card-swiper-text-img-one-page {
  width: rem(750);
  background: #efefef;
  padding-bottom: rem(20);
  .swiper {
    width: 100%;
    .swiper-slide {
      width: 100%;
      border-radius: rem(16);
      display: -webkit-box;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      box-sizing: border-box;
      padding: rem(20);
      .item-left{
        padding-top: rem(26);
        padding-bottom: rem(26);
        width: 55%;
        padding-right: rem(10);
        .item-title{
          font-size: rem(30);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: left;
          color: #333333;
          line-height: rem(50);
        }
        .item-desc{
          font-size: rem(24);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          text-align: left;
          color: #666666;
          line-height: rem(50);
        }
        .item-see-detail{
          margin-top: rem(20);
          span{
            display: inline-block;
            border-radius: rem(30);
            color: #fff;
            font-size: rem(24);
            cursor: pointer;
            background: #2da7b5;
            padding: 0 rem(20);
            line-height: rem(50);
          }
        }
      }
      .item-img{
        display: block;
        width: rem(180);
        height: rem(180);
        overflow: hidden;
        border-radius: rem(16);
        .van-image{
          display: block;
          height: 100%;
          width: 100%;
          img{
            display: block;
            height: 100%;
            width: 100%;
            //background-color: #dadada;
          }
        }
      }
    }
  }
}
</style>
